<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入css、js-->
    <link rel="stylesheet" href="static/plugins/bootstrap-4.6.2/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/iconfont.css">
    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script src="static/plugins/bootstrap-4.6.2/js/bootstrap.js"></script>
    <title>Document</title>
</head>
<body>
  <div class="container">
    <!--导航条-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#" class="col-md-2">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarNavDropdown" class="col-md-8">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">我的数据<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">数据处理</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">模型训练</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">保险评估</a>
            </li>
        </ul>
      </div>
        <div class=" col-md-1 nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false" style="color: gray;">
            zhangsan
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">个人中心</a>
            <a class="dropdown-item" href="#">修改密码</a>
            <a class="dropdown-item" href="#">退出登录</a>
          </div>
        </div>
    </nav>
    <!--数据集-->
    <div class="local-data">
      <span class="local-data-span">
              本地数据
      </span> 
      <div class="local-data-btn-div">
              <input type="file" id="csvFileInput" style="display: none;" name="csvFileInput">
              <button class="local-data-btn" id="fileUploadBtn" type="button">上传数据</button>
      </div>  
    </div>

    <!--文件属性表头-->
    <div class="file-nav">
      <ul>
              <li class="col-md-6 file-name">数据名称</li>
              <li class="col-md-5 updata-time">更新时间</li>
      </ul>
    </div>

    <!--数据列表-->
    <ul class="file-ul">
      <!-- 这里显示上传文件的相关信息 -->
      <li class="file-li">
              <span class="col-md-6 filetiltename">
                      <img src="static/img/excel-01.png"></img>
                      <span class="filetitle "> 实例数据.scv</span>
              </span>
              <span class="col-md-5 updata-time" style="padding-top: 20px;">2023.03.04 13:00:00</span>
              <a href="#" class="col-md-1" style="padding-top: 30px;">
                      <span class="continue" >查看详情</span>
              </a>
      </li>
    </ul>
  </div>
  <style>
    .container{
      margin: 0;
      padding: 20px;
    }
    .file-nav {
      width: 95vw;
      height: 6vh;
      border: box 1px solid #cccccc;
      background-color: #F5F7FA;
      margin: 0 auto;
      display: flex;
      margin-top: 20px;
    }
    .file-ul {
      width: 95vw;
      height: 80px;
      margin: 0 auto;
    }
    .file-ul .file-li {
      height: 68px;
      margin: 0;
      padding: 0;
      display: flex;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #898b8f;
      border-bottom: #F0F3F6 1px solid;
    }
    .file-ul a {
      color: #1A78FF;
      font-size: 10px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
    }
    .file-li:hover {
      background-color: #FAFBFC;
    }
    .file-nav ul {
      display: flex;
      width: 95vw;
      list-style:none;
    }
    .file-nav ul li {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #aaadb1;
      display: flex;
      padding-top: 10px;
    }
    .file-name {
      justify-content: left;
    }
    .updata-time {
      justify-content: left;
    }
    .local-data {
      width: 95vw;
      margin: 0 auto;
      line-height: 8vh;
      border-bottom: #E9E9E9 1px solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .local-data .local-data-span {
      display: inline-block;
      color: #1a78ff;
      font-size: 16px;
      width: 10vw;
      line-height: 8vh;
      text-align: center;
      border-bottom: #1A78FF 2px solid;
    }
    .local-data-btn{
      width: 90px;
      height: 50px;
      border: 1px solid #A3C9FF;
      background-color: white;
      border-radius: 10px;
      color: #1A78FF;
      line-height: 50px;
      text-align: center;
      justify-content: center;
    }
    .local-data-btn:hover{
      background-color: #1A78FF;
      color: white;
    }
  </style>
</body>
</html>